<template>
  computed,watch:
  <br/>
  {{sum}}
  {{poi}}
  <button @click="watchValue++">watchValue++</button>
  {{watchValue}}
</template>
<script setup lang="ts">
  import { computed, ref, watch, watchEffect } from 'vue';
  //https://vue3js.cn/reactivity/computed.html
  const sum=ref('sum')
  const watchValue=ref(1)

// computed
  // 传入getter函数
  const poi=computed(()=>sum.value+'999')
  console.log(poi)
  // poi.value++ // 报错，不可手动修改

  // 传入一个拥有 get 和 set 函数的对象
  const count=ref(1)
  const plusOne=computed({
    get:()=>count.value+1,
    set:val=>count.value=val-1
  })
  plusOne.value=1 // 可以手动修改
  console.log(count.value)  // 0

// watch
  watch(
    watchValue,
    (curVal,oldVal)=>{
      console.log('监听器：',curVal,oldVal)
    },
    {
      deep:true
    }
  )
// watchEffect,响应式的追踪函数中引用响应式数据，数据改变时会重新执行函数
  const countEffect=ref(0)
  const stop=watchEffect(()=>console.log(countEffect.value,'更新了'))
  setTimeout(() => {
    countEffect.value++
    // 停止监听
    stop()
  }, 2000);


</script>